<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

// 筛选条件
const filter = reactive({
  billNo: '',
  orderNo: '',
  refundNo: '',
  status: '',
  name: '',
  receiver: '',
  start: '',
  end: ''
});

const activeTab = ref('pay');

// 统计
const stats = reactive({
  orderAmount: 1000,
  refundAmount: 1000,
  commission: 1000,
  actualIncome: 1000
});

// 表格数据
const tableData = ref<any[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);

// mock 数据
const mockList = [
  {
    billNo: '20200200003',
    type: '支付订单',
    orderNo: '1012001010231',
    amount: '100.00',
    commission: 10,
    time: '2020-07-19 14:48:38',
    status: '待确认',
    remark: '-',
    op: '详情'
  },
  {
    billNo: '20200200003',
    type: '支付订单',
    orderNo: '1012001010231',
    amount: '100.00',
    commission: 10,
    time: '2020-07-19 14:48:38',
    status: '已确认',
    remark: '-',
    op: '详情'
  },
  {
    billNo: '20200200003',
    type: '支付订单',
    orderNo: '1012001010231',
    amount: '100.00',
    commission: 10,
    time: '2020-07-19 14:48:38',
    status: '已冲正',
    remark: '异常备注',
    op: '详情'
  },
  {
    billNo: '20200200003',
    type: '支付订单',
    orderNo: '1012001010231',
    amount: '100.00',
    commission: 10,
    time: '2020-07-19 14:48:38',
    status: '待确认',
    remark: '-',
    op: '详情'
  }
];

function fetchTableData() {
  loading.value = true;
  setTimeout(() => {
    // 模拟筛选和分页
    let list = mockList.filter(item => {
      return (
        (!filter.billNo || item.billNo.includes(filter.billNo)) &&
        (!filter.orderNo || item.orderNo.includes(filter.orderNo))
      );
    });
    total.value = list.length;
    tableData.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
    loading.value = false;
  }, 300);
}

onMounted(fetchTableData);

function handleSearch() {
  currentPage.value = 1;
  fetchTableData();
}
function handleReset() {
  Object.assign(filter, { billNo: '', orderNo: '', refundNo: '', status: '', name: '', receiver: '', start: '', end: '' });
  currentPage.value = 1;
  fetchTableData();
}
function handlePageChange(val: number) {
  currentPage.value = val;
  fetchTableData();
}
function handleSizeChange(val: number) {
  pageSize.value = val;
  fetchTableData();
}
function handleExport() {
  ElMessage.success('导出成功（mock）');
}
function handleTab(tab: string) {
  activeTab.value = tab;
  fetchTableData();
}
function handleDetail(row: any) {
  router.push(`/finance/order-detail/${row.orderNo}`);
}

const settingDialogVisible = ref(false);
const settingStatus = ref('已确认');
const settingRemark = ref('');

let currentRow: any = null;

function handleSetting(row: any) {
  currentRow = row;
  settingStatus.value = row.status || '已确认';
  settingRemark.value = row.remark === '-' ? '' : (row.remark || '');
  settingDialogVisible.value = true;
}
function handleSettingConfirm() {
  if (currentRow) {
    currentRow.status = settingStatus.value;
    currentRow.remark = settingRemark.value || '-';
  }
  settingDialogVisible.value = false;
}
function handleSettingCancel() {
  settingDialogVisible.value = false;
}
</script>

<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh;">
    <!-- 筛选区 -->
    <el-card style="margin: 0 auto; max-width: 1800px;">
      <el-form :inline="true" :model="filter" class="filter-form" style="margin-bottom: 12px; flex-wrap: wrap;">
        <el-form-item label="账单流水">
          <el-input v-model="filter.billNo" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="filter.orderNo" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="退款单号">
          <el-input v-model="filter.refundNo" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="账单时间">
          <el-date-picker
            v-model="filter.start"
            type="date"
            placeholder="开始时间"
            style="width: 130px;"
          />
          <span style="margin: 0 8px;">至</span>
          <el-date-picker
            v-model="filter.end"
            type="date"
            placeholder="结束时间"
            style="width: 130px;"
          />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="filter.status" placeholder="全部" style="width: 140px;">
            <el-option label="全部" value="" />
            <el-option label="待确认" value="待确认" />
            <el-option label="已确认" value="已确认" />
            <el-option label="已冲正" value="已冲正" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="filter.name" placeholder="请输入内容" clearable style="width: 120px;" />
        </el-form-item>
        <el-form-item label="收件人">
          <el-input v-model="filter.receiver" placeholder="请输入内容" clearable style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">检索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="danger" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Tabs + 统计 -->
    <el-card style="margin: 24px auto 0; max-width: 1800px;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <el-tabs v-model="activeTab" @tab-click="tab => handleTab(String(tab.paneName))">
          <el-tab-pane label="支付订单" name="pay" />
          <el-tab-pane label="售后订单" name="after" />
        </el-tabs>
        <div style="display: flex; gap: 12px;">
          <el-button type="primary" plain>订单金额 ￥{{ stats.orderAmount.toFixed(2) }}</el-button>
          <el-button type="primary" plain>退款金额 ￥{{ stats.refundAmount.toFixed(2) }}</el-button>
          <el-button type="primary" plain>佣金支出 ￥{{ stats.commission.toFixed(2) }}</el-button>
          <el-button type="primary" plain>实际收入 ￥{{ stats.actualIncome.toFixed(2) }}</el-button>
        </div>
      </div>
      <!-- 表格区 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 12px;" :loading="loading">
        <el-table-column prop="billNo" label="账单流水号" min-width="140" />
        <el-table-column prop="type" label="订单类型" min-width="120" />
        <el-table-column prop="orderNo" label="订单编号" min-width="160" />
        <el-table-column prop="amount" label="订单金额" min-width="100" align="center" />
        <el-table-column prop="commission" label="结算佣金" min-width="100" align="center" />
        <el-table-column prop="time" label="账单时间" min-width="160" />
        <el-table-column prop="status" label="状态" min-width="100" align="center" />
        <el-table-column prop="remark" label="备注" min-width="120" />
        <el-table-column label="操作" min-width="120" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
            <el-button type="primary" link @click="handleSetting(row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 16px;">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total, sizes"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
        />
        <span style="color: #d33; font-size: 15px;">当前条件共检索到 {{ total }} 条相关信息</span>
      </div>
    </el-card>
  </div>
  <el-dialog v-model="settingDialogVisible" title="设置" width="500px" :close-on-click-modal="false">
    <div style="display: flex; gap: 12px; margin-bottom: 18px;">
      <el-button :type="settingStatus === '已确认' ? 'danger' : 'default'" @click="settingStatus = '已确认'">已确认</el-button>
      <el-button :type="settingStatus === '异常' ? 'danger' : 'default'" @click="settingStatus = '异常'">异常</el-button>
      <el-button :type="settingStatus === '已冲正' ? 'danger' : 'default'" @click="settingStatus = '已冲正'">冲正</el-button>
    </div>
    <el-input v-model="settingRemark" placeholder="请输入备注" style="margin-bottom: 24px;" />
    <div style="display: flex; justify-content: flex-end; gap: 16px;">
      <el-button @click="handleSettingCancel">取消</el-button>
      <el-button type="danger" @click="handleSettingConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>